<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>
    var tbody = document.querySelector(".catbox tbody");

    var xhr = new XMLHttpRequest();

    xhr.open("get", "../data/shoppingCar.json", true);

    xhr.send();

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            result = JSON.parse(result);
            console.log("请求成功:", result);

            var html = "";
            result.forEach(({ goodsName, goodsMsg, goodsImg, goodsPrice, buyNum }) => {
                html += `<tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods">
                        <img src="${goodsImg}" alt="" />
                        <span>${goodsName}</span>
                    </td>
                    <td class="price">${goodsPrice}</td>
                    <td class="count"><span class="reduce">${buyNum > 1 ? "-" : ""}</span>
                        <input class="count-input" type="text" value="${buyNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${(goodsPrice * buyNum).toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`
            })
            tbody.innerHTML = html;

            // 等页面动态生成之后再获取元素和绑定事件
            bindEvent();

        }
    }


    function bindEvent() {
        var checkAll = document.getElementsByClassName("check-all")[0];
        var checkOneList = document.getElementsByClassName("check-one");
        var addList = document.getElementsByClassName("add");
        var reduceList = document.getElementsByClassName("reduce");
        var deleteList = document.getElementsByClassName("delete");
        var deleteAll = document.getElementById("deleteAll");
        var selectedTotal = document.getElementById("selectedTotal");
        var priceTotal = document.getElementById("priceTotal");

        // 1.  全选 和  反选  
        //     全选  => 点击全选  所有单选框(check-one)的状态跟随全选(check-all)的状态 (checked)
        //     反选  => 点击单选  =>  判断所有的单选是否都选中  => 全都选选中 :全选反选  否则:全选不选中

        // 全选功能
        // 点击全选  所有单选框(check-one)的状态跟随全选(check-all)的状态 (checked)

        checkAll.onclick = function () {
            var status = this.checked;
            console.log(status);

            // 回调函数
            // 把一个函数当做参数传递到另一个函数中,让它在另一个函数中调用执行 => 传入时并不会执行,而是在另一个函数中通过参数调用执行 => 锦囊妙计(提前决定好要执行的内容,需要的时候执行)
            Array.from(checkOneList).forEach(function (checkOne) {
                checkOne.checked = status;
            })

            getTotal();

        }

        // 反选
        // 点击单选  =>  判断所有的单选是否都选中  => 全都选选中 :全选反选  否则:全选不选中

        for (let i = 0; i < checkOneList.length; i++) {
            let checkOne = checkOneList[i];
            checkOne.onclick = function () {

                isAllChecked();

                // 点击单选 => 
                getTotal();




            }
        }


        // (1)加法要求 
        // 点击 “+”     输入框  数量 加一
        //             小计更新  =  单价*数量
        //             减号按钮的 “-”  出现

        for (let i = 0; i < addList.length; i++) {
            let add = addList[i];

            add.onclick = function () {
                // console.log(this, add);
                // a. 输入框  数量 加一
                var countInput = this.previousElementSibling;
                var num = countInput.value; // 取值
                num++;  // 自增
                countInput.value = num; // 赋值回去
                // countInput.value++;

                // b. 小计更新  =  单价*数量
                var priceTd = this.parentElement.previousElementSibling; // 加号的父元素的前一个
                var subtotalTd = this.parentElement.nextElementSibling; // 加号的父元素的后一个

                // 如果有单位 记得去单位 "5999.88元" "¥5999.88"
                var price = priceTd.textContent;

                var subtotal = price * num;

                subtotalTd.textContent = subtotal.toFixed(2);

                // c. 减号按钮的 “-”  出现
                var reduce = countInput.previousElementSibling;
                reduce.textContent = "-";

                getTotal();

            }
        }


        // 点击减号    输入框  数量 减一   （细节要求  数量为1的时候  不再减）
        //            小计更新  =  单价*数量
        //            减之前  判断  如果数量为1  不能减     return false
        //            减之后  判断  如果数量为1  减号按钮的 “-” 消失

        for (let i = 0; i < reduceList.length; i++) {
            let reduce = reduceList[i];
            reduce.onclick = function () {
                console.log(this);
                // a. 输入框  数量 减一
                var countInput = this.nextElementSibling;
                var num = countInput.value; // 取值
                // 减之前判断 如果数量已经为1 不能减
                if (num == 1) {
                    alert("亲,不能在少了!");
                    return false;
                };

                num--;  // 自减
                // 减之后判断  如果数量已经为1(2切1) 减号文本消失
                if (num == 1) {
                    this.textContent = "";
                };



                countInput.value = num; // 赋值回去
                // countInput.value++;

                // b. 小计更新  =  单价*数量
                var priceTd = this.parentElement.previousElementSibling; // 加号的父元素的前一个
                var subtotalTd = this.parentElement.nextElementSibling; // 加号的父元素的后一个

                // 如果有单位 记得去单位 "5999.88元" "¥5999.88"
                var price = priceTd.textContent;

                var subtotal = price * num;

                subtotalTd.textContent = subtotal.toFixed(2);


                getTotal()
            }
        }


        // 3.  再写删除 
        // 1.  单删   点击每条数据之后的删除   删除该条数据
        // 2.  多删   判断单选框是否被选中(checked)     选中就删除 该行 

        // 两个细节
        // 1.  单删   
        //     每次删除商品之后  判断  如果剩余的商品全部被选中 => 全选框 变为选中状态
        //     商品全部删除之后 checkOneList.length = 0  假设法循环不执行 flag = true => 解决方法:如果没有商品 默认为false

        // 单删  
        for (let i = 0; i < deleteList.length; i++) {
            let del = deleteList[i];
            del.onclick = function () {
                console.log(this);
                if (confirm("是否删除当前商品?")) {
                    var parentTr = this.parentElement.parentElement;
                    parentTr.remove();

                    isAllChecked();
                    getTotal()
                }
            }
        }

        // 全删 =>删除所有选中
        //     0        1        2        3
        // [checkOne,checkOne,checkOne,checkOne]  
        // 前面的元素被删除之后 后面的元素向前移到 => 存在漏网之鱼  

        // 怎么解决?   1. 删除之后 下次还从当前位置删  2. 倒着向前删


        // 类似数组塌陷(数组坍塌)  => 数组前面的元素被删除之后 后面的元素会批量向前移动 占据被删除元素的位置

        deleteAll.onclick = function () {
            for (var j = 0; j < checkOneList.length; j++) {
                var checkOne = checkOneList[j];
                if (checkOne.checked) {
                    var parentTr = checkOne.parentElement.parentElement;
                    parentTr.remove();
                    j--;
                }
            }

            isAllChecked();
            getTotal();

        }


        function isAllChecked() { // 判断是否反选
            var flag = true; //假设都被选中
            for (var j = 0; j < checkOneList.length; j++) {
                var item = checkOneList[j];
                if (!item.checked) { // !item.checked == true =>  item.checked == false
                    flag = false;
                    break;
                }
            }
            checkAll.checked = checkOneList.length > 0 ? flag : false;
        }


        function getTotal() {

            var sum = 0;  // 记录数量
            var allPrice = 0; // 记录总价

            // 从所有商品中 找到 被选中的checkOne => 找到该行的数量和小计 => 累加
            for (var j = 0; j < checkOneList.length; j++) {
                var checkOne = checkOneList[j];
                if (checkOne.checked) {
                    var parentTr = checkOne.parentElement.parentElement;
                    var countInput = parentTr.getElementsByClassName("count-input")[0];
                    var subtotalTd = parentTr.getElementsByClassName("subtotal")[0];
                    // console.log(checkOne, countInput, subtotalTd);

                    var num = countInput.value * 1;
                    var subtotal = subtotalTd.textContent * 1;

                    sum += num;
                    allPrice += subtotal;
                }
            }

            selectedTotal.textContent = sum;
            priceTotal.textContent = allPrice.toFixed(2);
        }
    }

</script>

</html>